<template>
  <view class="cart-noGoods" v-if="cart.length == 0">
    <image src="../../static/cart_empty@2x.png"></image>
    <text class="texts">您的购物车空空如也~~~</text>
  </view>

  <view class="cart-container" v-else>

    <my-address></my-address>

    <!-- 购物车列表的标题部分 -->
    <view class="cart-title">
      <uni-icons type="shop" size="20"></uni-icons>
      <text class="cart-title-text">购物车</text>
    </view>

    <!-- 显示购物车商品区域 -->
    <uni-swipe-action>
      <block v-for="(item,index) in cart" :key="index">
        <uni-swipe-action-item :right-options="options" @click="bindClick(item)">
          <uni-card>
            <view class="title" @click="gotoShop">
              <text class="title-text">商家店铺xxx</text>
              <uni-icons type="arrowright" size="15" color="gray"></uni-icons>
            </view>
            <view class="cart-main">
              <!-- 在外面设置radio也行 -->
              <my-goods :item="item" :show-radio="true" :showNum="true" @radio-change="radioHandler"></my-goods>
            </view>
          </uni-card>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog mode="base" title="真的要删除宝贝吗?" :duration="2000" :before-close="true" @close="close"
        @confirm="confirm"></uni-popup-dialog>
    </uni-popup>

    <my-total :cart="cart"></my-total>
  </view>

</template>

<script>
  import {
    mapState,
    mapGetters,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        good: {},
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#c00000',
          }
        }],

      };
    },
    computed: {
      ...mapState('cart', ['cart']),
      ...mapGetters('cart', ['totals'])
    },
    watch: {
      totals() {
        this.setBadege()
      }
    },

    //生命周期函数
    onShow() {
      this.setBadege()
    },

    methods: {
      ...mapMutations('cart', ['updateGoodsState', 'deleteGoods']),

      //动态展示tabBar数字徽标
      setBadege() {
        uni.setTabBarBadge({
          index: 2,
          text: this.totals == 0 ? (uni.removeTabBarBadge({
            index: 2
          })) : this.totals + ''
        })
      },

      //自定义函数回调
      radioHandler(e) {
        this.updateGoodsState(e)
      },

      //点击了滑动删除的删除按键 传入要删除的商品
      bindClick(good) {
        this.good = good
        //打开弹窗
        this.$refs.popup.open()
      },
      close() {
        // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
        // ...
        this.$refs.popup.close()
      },
      confirm(value) {
        //删除商品
        this.deleteGoods(this.good)
        this.$refs.popup.close()
      },
      gotoShop() {
        console.log('前往商铺')
      },
    }

  }
</script>

<style lang="scss">
  .cart-noGoods {
    height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      height: 100px;
      width: 100px;
    }

    .texts {
      margin-top: 10px;
      color: gray;
      font-size: 13px;
    }
  }

  .cart-container {
    padding-bottom: 50px;
  }

  .cart-title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #efefef;

    .cart-title-text {
      margin-left: 8px;
      font-size: 17px;
    }
  }

  .uni-card {
    margin: 6px !important;
    padding: 1px !important;
  }

  .uni-card__header {
    padding: 5px !important;
  }

  .cart-main {
    display: flex;
    //居中对齐
    align-items: center;

  }

  .title {
    .title-text {
      margin-right: 5px;
      font-weight: 700;
      font-size: 15px;
    }
  }
</style>
